<template>

  <div class="recommend">
      <div class="big_picture">
          <img src="../../../../static/images/y3_05.png" alt="">
      </div>
     <div class="lateral-sliding">
         <div class="lateral-sliding-item" v-for="item in recommendList" :key="item.id">
             <div class="each-img">
                 <img :src="item.imgUrl" alt="">
                 <div class="each-text">
                     <p class="text">{{item.text}}</p>
                     <p class="price">￥{{item.price}}</p>
                 </div>
             </div>
         </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'HomeRecommend',
  props:{
      recommendList:Array
  },
  data () {
    return {
      
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '../../../assets/css/varibles.styl'
.recommend 
    width 100%
    height 8rem
    margin-top .2rem 
    background-color #fff
    .big_picture
        width 100%
        img
            width 100%
    .lateral-sliding 
        display flex
        margin-top .4rem 
        overflow-y hidden
        // overflow-x scroll
    .lateral-sliding-item 
        display flex
        height 3.3rem
        margin-right 8px
        border 1px solid rgba(239,239,239,0.6)
        // background-color yellow
    .each-img 
        width 3rem
        height 1.86rem
        img 
            width 100%
            height 100%
    .each-text
        .text
            font-size .32rem
            // font-weight bold
            padding .2rem .1rem .2rem .2rem
        .price 
            font-size .32rem
            font-weight bold
            padding 0 .2rem
</style>
